<template>
  <div>
    <section>
      <div class="echarts">
        <Echarts :options="pie" ref="echarts"></Echarts>
        <div class="txt">次数统计%</div>
        <ul class="legend">
          <li v-for="(item, index) in labelsShow" :key="index">{{item}}</li>
        </ul>
        <div class="switch"><span @click="handleUp"></span>{{index + 1}}/{{Math.ceil(labels.length / 8)}}<span
          @click="handleDown"></span></div>
      </div>
      <div class="echarts">
        <Echarts :options="pie" ref="echarts"></Echarts>
        <div class="txt" style="line-height: 30px;padding-top: 50px">故障持续<br>时间统计%</div>
        <ul class="legend">
          <li v-for="(item, index) in labelsShow" :key="index">{{item}}</li>
        </ul>
        <div class="switch"><span @click="handleUp"></span>{{index + 1}}/{{Math.ceil(labels.length / 8)}}<span
          @click="handleDown"></span></div>
      </div>
    </section>

    <section>
      <h5 class="title">管理对象</h5>
      <el-table v-loading.body="loading" :data="tableData" border>
        <el-table-column prop="date" label="名称" align="center"></el-table-column>
        <el-table-column prop="uv" label="IP" align="center"></el-table-column>
        <el-table-column prop="ip" label="类型" align="center"></el-table-column>
        <el-table-column prop="new_uv" label="故障次数" align="center"></el-table-column>
        <el-table-column prop="pv" label="百分比(%)" align="center"></el-table-column>
        <el-table-column prop="last_week_pv" label="故障持续时间统计" align="center" width="200"></el-table-column>
        <el-table-column prop="pv" label="百分比(%)" align="center"></el-table-column>
      </el-table>

      <Pagination />
    </section>
  </div>
</template>

<script>
  import Echarts from "@/components/Echarts.vue";
  import {mixins} from "@/core";

  export default {
    components: {
      Echarts
    },
    mixins: [mixins],
    data () {
      return {
        API: {
          query: "http://localhost:8090/static/flow_table.json"
        },
        labels: [],
        index: 0,
        pie: {
          url: "http://localhost:8090/static/abnormal.json",
          setData: (data) => {
            this.pie.series[0].data = data.rows;
            this.labels = data.rows.map(item => {
              return item.name;
            })
          },
          title: {
            text: "设备统计"
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          legend: {
            orient: "vertical",
            x: "right"
          },
          color: ["#0076cb", "#ffc200", "#00bb2a", "#9f5ac6", "#cb6bdf", "#0097fa", "#00e582", "#ffe557"],
          xAxis: null,
          yAxis: null,
          series: [
            {
              name: "访问来源",
              type: "pie",
              center: ["36%", "50%"],
              radius: ["40%", "70%"],
              label: {
                normal: {
                  show: false,
                  position: "center"
                }
              }
            }
          ]
        }
      }
    },
    computed: {
      labelsShow () {
        return this.labels.slice(this.index * 8, (this.index + 1) * 8);
      }
    },
    methods: {
      handleUp () {
        this.index > 0 && this.index--;
      },
      handleDown () {
        (this.index + 1 < Math.ceil(this.labels.length / 8)) && this.index++;
      }
    }
  }
</script>

<style scoped lang="scss">
  section {
    margin-bottom: 20px;
    overflow: hidden;
  }

  .echarts {
    float: left;
    width: 100%;
    height: 400px;
  }

  section > .echarts {
    width: calc((100% - 20px) / 2);
    margin-right: 20px;
    margin-bottom: 20px;
    background-color: #fff;
    position: relative;

    &:nth-child(even) {
      margin-right: 0;
    }

    .txt {
      width: 160px;
      height: 160px;
      line-height: 160px;
      border-radius: 50%;
      font-size: 18px;
      font-weight: bold;
      position: absolute;
      top: 50%;
      left: 36%;
      margin-left: -80px;
      margin-top: -80px;
      color: #4e5358;
      text-align: center;
      box-sizing: border-box;
    }

    .legend {
      position: absolute;
      top: 60px;
      right: 50px;
      list-style: none;
      margin: 0;
      font-size: 12px;

      li {
        margin: 10px 0;
      }

      $colors: #0076cb #ffc200 #00bb2a #9f5ac6 #cb6bdf #0097fa #00e582 #ffe557;

      @for $i from 1 through 8 {
        li:nth-child(#{$i})::before {
          content: "";
          width: 16px;
          height: 10px;
          background-color: nth($colors, $i);
          display: inline-block;
          margin-right: 10px;
        }
      }
    }

    .switch {
      position: absolute;
      bottom: 80px;
      right: 86px;
      font-size: 18px;
      color: #010101;

      span {
        display: inline-block;
        border-color: transparent #274161 transparent transparent;
        border-style: solid;
        border-width: 6px;
        width: 0;
        height: 0;
        margin: 0 10px;
        cursor: pointer;

        &:last-child {
          border-color: transparent transparent transparent #274161;
        }
      }
    }
  }
</style>
